/* eslint-disable guard-for-in */ /* eslint-disable import/no-extraneous-dependencies */
<template>
  <div id="boomViewer" ref="boomViewer" style="height: 100%; width: 100%" v-show="status.isShow">
    <el-row style="top: 20px">
      <el-col :span="10" id="imagePdf">
        <el-card style="margin: 8px">
          <el-image id="pdfKonvaData" :src="status.konvaData" fit="cover" :style="methods.getStyle"
        /></el-card>
        <el-card style="margin: 8px" id="pdfBabylonData">
          <el-image :src="status.babylonData" fit="cover" :style="methods.getStyle"
        /></el-card>
      </el-col>
      <el-col :span="14">
        <div class="card-header">
          <span />
          <el-button-group>
            <el-button class="button" @click="methods.exportExcel">{{
              $t(`vichdraw.exportExcel`)
            }}</el-button>
            <el-button class="button" @click="methods.exportPdf">{{
              $t(`vichdraw.exportPDF`)
            }}</el-button>
          </el-button-group>
        </div>
        <el-card style="margin: 8px" id="pdfCard">
          <el-scrollbar :height="status.tableHeight">
            <el-table
              :data="tableData.fence"
              border
              style="width: 100%; margin: 8px"
              size="mini"
              id="pdfFence"
            >
              <el-table-column prop="model" label="网板型号" />
              <el-table-column prop="type" label="网板规格(mm)" width="100" />
              <el-table-column prop="spacing" label="网孔规格(mm)" width="100" />
              <el-table-column prop="color" label="颜色" width="75" />
              <el-table-column prop="count" label="数量" width="50" /> </el-table
            ><el-table
              :data="tableData.door"
              border
              style="width: 100%; margin: 8px"
              size="mini"
              id="pdfDoor"
            >
              <el-table-column prop="type" label="门配件类型" width="180" />
              <el-table-column prop="model" label="型号" />
              <el-table-column prop="size" label="规格(mm)" width="100" />
              <el-table-column prop="color" label="门颜色" width="75" />
              <el-table-column prop="count" label="数量" width="50" /></el-table
            ><el-table
              :data="tableData.pillar"
              border
              style="width: 100%; margin: 8px"
              size="mini"
              id="pdfPillar"
            >
              <el-table-column prop="model" label="立柱型号" />
              <el-table-column prop="type" label="规格(mm)" width="100" />
              <el-table-column prop="color" label="颜色" width="75" />
              <el-table-column prop="count" label="数量" width="50" />
              <!-- <el-table-column prop="link" label="对照表链接" /> -->
            </el-table>
            <el-table
              :data="tableData.gadget"
              border
              style="width: 100%; margin: 8px"
              size="mini"
              id="pdfGadget"
            >
              <el-table-column prop="type" label="立柱配件类型" width="280" />
              <el-table-column prop="model" label="型号" />
              <el-table-column prop="count" label="数量" width="50" />
              <!-- <el-table-column prop="link" label="对照表链接" /> -->
            </el-table>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
/* eslint-disable no-unused-vars */
/* eslint-disable no-restricted-syntax */

import { defineComponent, onMounted, reactive, computed, toRaw } from 'vue'
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
import { ElLoading } from 'element-plus'
import exportUtil from '@/utils/excel'
import { useStore } from '@/store/index'
import { FenceClass } from '@/store/fence'
import { PillarClass } from '@/store/pillar'
import logo from '@/assets/logo.png'

export default defineComponent({
  components: {},
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  setup() {
    const store = useStore()
    const { t } = useI18n()

    const status = reactive({
      isShow: true,
      konvaData: logo,
      babylonData: logo,
      tableHeight: 400
    })
    const tableData = reactive({ fence: [], door: [], pillar: [], gadget: [] })

    const methods = {
      getStyle: computed(() => {
        return {
          width: ((store.globalParam.width - 100) / 24) * 10,
          height: (store.globalParam.height - 90) / 2
        }
      }),

      createTable: async () => {
        status.tableHeight = store.globalParam.height - 180

        tableData.fence = []
        tableData.door = []
        tableData.pillar = []
        tableData.gadget = []
        const fenceMap = new Map()
        const pillarMap = new Map()
        const shieldMap = new Map()
        const protectiveRingMap = new Map()

        for (const [key, fence] of store.drawing.fences) {
          const fenceName = fence.getName()

          if (fenceMap.has(fenceName)) {
            fenceMap.set(fenceName, fenceMap.get(fenceName) + 1)
          } else {
            fenceMap.set(fenceName, 1)
          }
        }
        for (const [model, count] of fenceMap) {
          const fence = FenceClass.fromString(model)
          fence.count = count
          tableData.fence.push(fence)
        }

        for (const [key, door] of store.drawing.doors) {
          tableData.door = tableData.door.concat(door.getGadget(store.pillar.diameter))
        }

        for (const [key, pillar] of store.drawing.pillars) {
          const pillarName = pillar.getName()
          const protectiveRingName = pillar.getProtectiveRingName()
          const shieldName = pillar.getShieldName()

          if (pillarMap.has(pillarName)) {
            pillarMap.set(pillarName, pillarMap.get(pillarName) + 1)
          } else {
            pillarMap.set(pillarName, 1)
          }
          if (protectiveRingMap.has(protectiveRingName)) {
            protectiveRingMap.set(protectiveRingName, protectiveRingMap.get(protectiveRingName) + 2)
          } else {
            protectiveRingMap.set(protectiveRingName, 2)
          }
          if (shieldMap.has(shieldName)) {
            shieldMap.set(shieldName, shieldMap.get(shieldName) + 1)
          } else {
            shieldMap.set(shieldName, 1)
          }
        }
        for (const [model, count] of pillarMap) {
          const pillar = PillarClass.fromString(model)
          pillar.count = count
          tableData.pillar.push(pillar)
        }
        for (const [model, count] of protectiveRingMap) {
          tableData.gadget.push({ type: '固定环', model, count })
        }
        for (const [model, count] of shieldMap) {
          tableData.gadget.push({ type: '防护罩', model, count })
        }
      },

      exportPdf: async () => {
        const loading = ElLoading.service({
          lock: true,
          text: t(`vichdraw.createFile`),
          background: 'rgba(0, 0, 0, 0.7)'
        })

        let pdfHeight = 150
        const pWidth = 595.28 - 16
        const canvasImageData = await html2Canvas(document.querySelector('#pdfKonvaData'), {
          allowTaint: true
        })
        pdfHeight += (pWidth / canvasImageData.width) * canvasImageData.height
        const canvasFenceTable = await html2Canvas(document.querySelector('#pdfFence'), {
          allowTaint: true
        })
        pdfHeight += (pWidth / canvasFenceTable.width) * canvasFenceTable.height
        const canvasDoorTable = await html2Canvas(document.querySelector('#pdfDoor'), {
          allowTaint: true
        })
        pdfHeight += (pWidth / canvasDoorTable.width) * canvasDoorTable.height
        const canvasPillarTable = await html2Canvas(document.querySelector('#pdfPillar'), {
          allowTaint: true
        })
        pdfHeight += (pWidth / canvasPillarTable.width) * canvasPillarTable.height
        const canvasGadgetTable = await html2Canvas(document.querySelector('#pdfGadget'), {
          allowTaint: true
        })
        pdfHeight += (pWidth / canvasGadgetTable.width) * canvasGadgetTable.height

        let y = 100
        const PDF = new JsPDF('l', 'pt', 'a4')
        PDF.text('vichdraw boom', 380, 50)
        const dateNow = dayjs().format('YYYY-MM-DD hh-mm-ss')
        PDF.text(dateNow, 360, 70)

        PDF.addImage(
          status.konvaData,
          'JPEG',
          0,
          y,
          840,
          (840 / canvasImageData.width) * canvasImageData.height
        )
        PDF.addPage('a4', 'l')
        PDF.addImage(
          status.babylonData,
          'JPEG',
          0,
          y,
          840,
          (840 / canvasImageData.width) * canvasImageData.height
        )

        PDF.addPage('a4', 'p')
        y = 100
        PDF.addImage(
          canvasFenceTable.toDataURL('image/jpeg', 1.0),
          'JPEG',
          0,
          y,
          pWidth,
          (pWidth / canvasFenceTable.width) * canvasFenceTable.height
        )
        y += (pWidth / canvasFenceTable.width) * canvasFenceTable.height
        PDF.addImage(
          canvasDoorTable.toDataURL('image/jpeg', 1.0),
          'JPEG',
          0,
          y,
          pWidth,
          (pWidth / canvasDoorTable.width) * canvasDoorTable.height
        )
        y += (pWidth / canvasDoorTable.width) * canvasDoorTable.height
        PDF.addImage(
          canvasPillarTable.toDataURL('image/jpeg', 1.0),
          'JPEG',
          0,
          y,
          pWidth,
          (pWidth / canvasPillarTable.width) * canvasPillarTable.height
        )
        y += (pWidth / canvasPillarTable.width) * canvasPillarTable.height
        PDF.addImage(
          canvasGadgetTable.toDataURL('image/jpeg', 1.0),
          'JPEG',
          0,
          y,
          pWidth,
          (pWidth / canvasGadgetTable.width) * canvasGadgetTable.height
        )
        PDF.save(`vichdraw ${t(`vichdraw.bomView`)} ${dateNow}.pdf`)
        loading.close()
      },

      exportExcel: async () => {
        const loading = ElLoading.service({
          lock: true,
          text: t(`vichdraw.createFile`),
          background: 'rgba(0, 0, 0, 0.7)'
        })
        exportUtil(
          status.konvaData,
          status.babylonData,
          {
            fence: {
              columns: [
                { key: 'model', title: '网板型号' },
                { key: 'type', title: '网板规格(mm)' },
                { key: 'spacing', title: '网孔规格(mm)' },
                { key: 'color', title: '颜色' },
                { key: 'count', title: '数量' }
              ],
              data: toRaw(tableData.fence)
            },
            door: {
              columns: [
                { key: 'type', title: '门配件类型' },
                { key: 'model', title: '型号' },
                { key: 'size', title: '规格(mm)' },
                { key: 'color', title: '颜色' },
                { key: 'count', title: '数量' }
              ],
              data: toRaw(tableData.door)
            },
            pillar: {
              columns: [
                { key: 'model', title: '立柱型号' },
                { key: 'type', title: '规格(mm)' },
                { key: 'color', title: '颜色' },
                { key: 'count', title: '数量' }
              ],
              data: toRaw(tableData.pillar)
            },
            gadget: {
              columns: [
                { key: 'type', title: '立柱配件类型' },
                { key: 'model', title: '型号' },
                { key: 'count', title: '数量' }
              ],
              data: toRaw(tableData.gadget)
            }
          },
          `vichdraw ${t(`vichdraw.bomView`)} ${dayjs().format('YYYY-MM-DD hh-mm-ss')}`
        )
        loading.close()
      }
    }

    onMounted(async () => {
      // await methods.createContainer()
    })

    return {
      methods,
      status,
      tableData
    }
  }
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px;
}
</style>
